<template>
	<view class="container">
		<view class="tab-bar">
			<UniRow>
				<UniCol :span="12">
					<view class="tab-pane" @click="setTabCurrent('in')">
						<view class="tab-title" :class="tabCurrent === 'in'? 'active' : ''">{{ $t('allocate.tab.allocateInbound') }}</view>
					</view>
				</UniCol>
				<UniCol :span="12">
					<view class="tab-pane" @click="setTabCurrent('out')">
						<view class="tab-title" :class="tabCurrent === 'out'? 'active' : ''">{{ $t('allocate.tab.allocateOutbound') }}</view>
					</view>
				</UniCol>
			</UniRow>
		</view>
		<view class="search-bar">
			<UniSearchBar :placeholder="`${$t('allocate.search.placeholder')}`" v-model="keyword" @confirm="search"
				:foucs="numFocus" @blur="formblur" @input="forminput" @cancel="cancel" cancel-text="cancel">
			</UniSearchBar>
		</view>
		<view class="list">
			<uni-list>
				<uni-list-item v-for="(item, index) in businessList" :key="index" showArrow :title="`${getNoText}: ${item[getNoVal]}  
				${$t('allocate.item.businessNo')}: ${item.businessNo || '-'} 
				 `" :note="`${$t('allocate.item.confirmUserName')}: ${item.confirmUserName || '-'}`"
					:rightText="`${getTotalNumText}: ${item.totalNum} \n ${getNumText}: ${item[getNumVal] || '-'}`" link="navigateTo"
					:to="`/pages/allocatedetail/allocatedetail?id=${item.id}&tabCurrent=${tabCurrent}`" />
			</uni-list>
			<uni-load-more :status="status" :icon-size="14" :content-text="contentText" @clickLoadMore="loadmore" />
		</view>
	</view>
</template>

<script>
	import api from '../../common/api.js'
	import KeyboardListener from 'uniapp-keyboard-listener'
	import UniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import UniRow from '@/components/uni-row/uni-row.vue'
	import UniCol from '@/components/uni-row/uni-col.vue'

	export default {
		components: {
			UniSearchBar,
			KeyboardListener,
			UniRow,
			UniCol
		},
		data() {
			return {
				status: 'more',
				contentText: {
					contentdown: this.$t('load.more.contentdown'), //'查看更多',
					contentrefresh: this.$t('load.more.contentrefresh'), //'加载中',
					contentnomore: this.$t('load.more.contentnomore') // '没有更多了'
				},
				pageIndex: 1,
				baseUrl: '',
				keyword: '', // 调拨单号 
				businessList: [],
				code: '',
				numFocus: false,
				pdacode: '',
				// tab
				tabCurrent: 'in',
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(e, '----e---')
				let that = this
			uni.scanCode({
				success: async function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					that.code = res.result
					await that.findByCode()
				}
			});
		},
		onLoad() {
		
		},
		computed: {
			// 请求函数
			pageFunc() {
				return this.tabCurrent === 'in'? api.getAllocateInboundPage : api.getAllocateOutboundPage
			},
			// 单号
			getNoText() {
				return this.tabCurrent === 'in'? this.$t('allocate.item.inboundNo') : this.$t('allocate.item.outboundNo')
			},
			getNoVal() {
				return this.tabCurrent === 'in'? 'inboundNo' : 'outboundNo'
			},
			// 总数
			getNumText() {
				return this.tabCurrent === 'in'? this.$t('allocate.item.inboundNum') : this.$t('allocate.item.outboundNum')
			},
			getNumVal() {
				return this.tabCurrent === 'in'? 'inboundNum' : 'outboundNum'
			},
			getTotalNumText() {
				return this.tabCurrent === 'in'? this.$t('allocate.item.inboundTotalNum') : this.$t('allocate.item.outboundTotalNum')
			}
		},
		methods: {
			setTabCurrent(val) {
				this.tabCurrent = val;
				// 重置参数
				this.keyword = '';
				this.businessList = [];
				// 切换时需要重新请求
				this.getPage();
			},
			forminput(){
				this.pdacode = ''
			},
			formfocus() {
				this.pdacode = ''
				setTimeout(() => {
					this.isFocus = false
					this.numFocus = true
				}, 0)
			},
			formblur() {
				// console.log(e.detail.value)
				this.pdacode = ''
				this.numFocus = false;
			},
			async scancodelisten(e) {
				let keyCode = e.keyCode
				// console.log(e, '-----e---')
				if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122)) {
					console.log('字母输入:', e.key);
					this.pdacode = this.pdacode + e.key
				} else if (keyCode >= 48 && keyCode <= 57) {
					console.log('数字输入:', e.key);
					console.log(this.numFocus, 'numFocus');
					this.pdacode = this.pdacode + e.key
				} else if (keyCode === 13) {
					this.code = this.pdacode
					if(this.code!==''){
						await this.findByCode()
					}
					this.pdacode = ''
				} else {
					console.log('其他输入:', e.key);
				}
			
				console.log(this.pdacode, '-----this.pdacode---')
			},
			async findByCode() {
				let ret = await this.pageFunc({
					page: { pageNumber: 1, pageSize: 50 },
					id: this.id,
					type: 2
				})
				if (ret.code === 0 && ret.data && ret.data.items.length>0) {
					uni.navigateTo({
						url: `/pages/allocatedetail/allocatedetail?id=${ret.data.items[0].id}&tabCurrent=${this.tabCurrent}`
					})
				} else {
					this.$nextTick(()=>{
						uni.showToast({
							title: this.$t('scanfun.fail'),
							icon: 'none'
						});
					})
					
				}
			},
			async onShow() {
				await this.getPage();
			},
			async getPage() {
				let ret = await this.pageFunc({
					keyword: '', page: { pageNumber: this.pageIndex, pageSize: 50 }, type: 2
				})
				console.log(ret, '======ret===page')
				if (ret.code === 0 && ret.data.items.length > 0) {
					this.businessList = ret.data.items
				}
			},
			async cancel() {
				this.keyword = ''
				this.pageIndex = 1
				await this.getPage();
			},
			async search(e) {
				this.keyword = e.value
				this.pageIndex = 1
				let ret = await this.pageFunc({ keyword: this.keyword, page: { pageNumber: this.pageIndex, pageSize: 50 }, type: 2 })
				if (ret.data.items.length > 0) {
					this.businessList = ret.data.items
				}
			},
			async scrolltolower() {
				console.log('scrolltolower-------scrolltolower---')
				await this.loadmore();
			},
			toStroeDetail(id){
				console.log('toStroeDetail----toStroeDetail---',id)
				let url = `/pages/storedetail/index?id=${id}`
				console.log('toStroeDetail----toStroeDetail---',url)
				uni.navigateTo({
					url:url
				})
			},
			async loadmore() {
				uni.showLoading({ title: 'Loading...', mask: true })
				this.pageIndex++
				let ret = await this.pageFunc({ keyword: this.keyword, page:{pageNumber: this.pageIndex,pageSize:50}, type: 2 })
				if(ret.code===0) {
					if(ret.data.items.length>0){
						this.businessList = [].concat(this.businessList, ret.data.items)
					}else{
						this.pageIndex--
					}
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style>
	.container {
		height: 100vh;
	}

	.search-bar,
	.tab-bar {
		/* 根据实际高度调整，示例假设搜索栏高度约50px */
		flex-shrink: 0;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	
	.tab-bar {
		padding: 6px;
	}

	.tab-pane {
		width: 100%;
		height: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		cursor: pointer;
	}
	
	.tab-title {
		width: 100rpx;
	}

	.active {
		position: relative;
		color: #3c9cff;
	}
	.active::after {
		content: '';
		width: 100rpx;
		height: 4rpx;
		background-color: #3c9cff;
		position: absolute;
		bottom: -10rpx;
		left: 0;
	}

	.title-item {
		padding-bottom: 10rpx;
		padding-top: 10rpx;
	}
</style>